<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="todolist.css">
    <script src="vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 4.搜索框 - 双向绑定 - 添加事件 键盘事件 回车 - 搜索点击事件-->
        <div id="top_1">
            搜索&nbsp&nbsp:&nbsp&nbsp
            <input type="text" v-model="txt" @keyup.enter="search">
            &nbsp&nbsp
            <button @click="search">搜索</button>
        </div>
        
        <!-- 1.data数据所在显示 表格 -->
        <table border="1" >
            <tr>
                <td>职位名称</td>
                <td>
                    <span>薪水</span>
                    <span :class="{asc:isAsc,desc:!isAsc}" @click="sort()"></span>
                </td>
                <td>操作</td>
            </tr>

            <!-- 2.循环遍历 加载数据 -->
            <tr v-for="item in getdatalist">
                <td>{{item.positionName}}</td>
                <td>{{item.salary}}</td>
                <td>
                    <!-- 添加事件 - 点击 编辑 传数据 -->
                    <button @click="edit(item)">编辑</button>
                    <!-- 点击事件 -传id -->
                    <button @click="del(item._id)">删除</button>
                </td>
            </tr>
        </table>

        <!-- 3.分页 -->
        <ul>
            <!-- 遍历 显示有几页  - 添加点击事件 改变对应页码数据 - 添加高亮效果只显示当前页码背景-->
            <li v-for="n in getPages" @click="changePage(n)" :class="{active:n===pagenum}">{{n}}</li>
        </ul>

        <!-- 添加 -->
        <div id="btn">
             <button @click="isShowAdd=true">添加</button>
        </div>
       
        <custom-dialog v-if="isShowAdd">
            <template #title>
                添加
            </template>
    
            <template #body>
                职位名称：
                <input v-model="position.positionName" type="text">
                <button @click="add">添加</button>
                <button @click="isShowAdd=false">取消</button>
            </template>
        </custom-dialog>

        <!--5. 调用组件 - 动态控制渲染 - 动态属性-编辑数据 -数据更新 -->
        <custom-dialog v-if="isShowEdit" :pos="position" @updateevent="update" @close="isShowEdit=false">
            <template #title>
                编辑
            </template>
    
            <template #body>
                职位名称：
                <input v-model="position.positionName" type="text">
                <button @click="update">提交</button>
                <button @click="isShowEdit=false">取消</button>
            </template>
        </custom-dialog> 
    </div>

    <script type="text/template" id="temp">
        <!--5. 遮罩层 - 模态框 -->
        <div class="mask">
            <!-- 6.对话框 -->
            <div class="dialog">
                <!-- 职位名称：<input type="text" v-model="position.positionName">
                  提交-更新数据 - 添加事件
                <button @click="submit()">提交</button>
                <button @click="$emit('close')">取消</button> -->

                <div>
                    <slot name="title">title</slot>
                </div>
                <div>
                    <slot name="body">
                        body
                    </slot>
                </div>
            </div>
        </div>
    </script>
    <script>
        // 5.定义一个全局组件
        Vue.component('custom-dialog',{
            template:`#temp`,
            // 在组件里接收 编辑数据
            props:['pos'],
            data(){
                return{
                    position:{}
                }
            },
            mounted(){
                // 编辑数据的 浅复制
                this.position = Object.assign({},this.pos)
            }
            // ,
            // methods:{
            //     submit(){
            //         // 通知
            //         this.$emit('updateevent',this.position)
            //     }
            // }
        })
        var vm = new Vue({
            el:"#app",
            created(){
                fetch('./data.json').then((res) => res.json()).then(res =>{
                    // 测试下 数据结构
                    // console.log(res);

                    // 改变datalist数据
                    this.datalist = res.data;
                })
            },
            data:{
                // 原始数据列表
                datalist:[],
                // 每页展示的数据条数
                pagesize:5,
                // 第几页的页码
                pagenum:1,
                // 输入框输入的关键字
                txt:'',
                // 参与getdatalist 计算属性里的数据运算
                keyword:'',
                // 控制排序 是否是正序
                isAsc:true,
                // 控制对话框状态 是否显示
                isShowEdit:false,
                // 编辑时，需要读取的数据
                position:{},
                //是否显示添加对话框
                isShowAdd: false
            },
            // 计算属性
            computed:{
                // 获取页码
                getPages(){
                     // 模糊查询 -过滤
                     let list = this.datalist.filter((item,index) => {
                        //  优化 不区分大小写 且符合所查询的字符串
                        var reg = new RegExp(this.keyword,"i");
                        return reg.test(item.positionName);

                        // 是否有查询的字符串
                        // return item.positionName.indexOf(this.keyword) > -1;
                    });

                    return Math.ceil(list.length / this.pagesize);
                },
                // 基于页码所取的数据
                getdatalist(){
                    // 模糊查询 -过滤
                    let list = this.datalist.filter((item,index) => {
                         //  优化 不区分大小写 且符合所查询的字符串
                        var reg = new RegExp(this.keyword,"i");
                        return reg.test(item.positionName);

                        // 是否有查询的字符串 
                        // return item.positionName.indexOf(this.keyword) > -1;
                    });

                    // 排序
                    list = list.sort((a,b) => {
                        let salaryA = parseInt(a.salary.replace(/k/ig,"000"));
                        let salaryB = parseInt(b.salary.replace(/k/ig,"000"));
                        // 判断排序
                        if(this.isAsc){
                            return salaryA - salaryB;
                        }else{
                            return salaryB - salaryA;
                        }
                    })

                    // 从原始数据里 截取一部分数据
                    // 截取的开始位置 及结束位置
                    let startIndex = (this.pagenum - 1) * this.pagesize;
                    let endIndex = startIndex + this.pagesize;
                    // 用查询回来的数据截取
                    return list.slice(startIndex,endIndex);
                }
            },
            // 方法
            methods:{
                // 接收id 实现删除
                del(id){
                    // 找到需要删除的数据
                    this.datalist.forEach((item,index) => {
                        // 判断所传id是否是目标id
                        if(item._id === id){
                            this.datalist.splice(index,1)
                        }
                    })
                },
                // 改变对应页码数据
                changePage(n){
                    this.pagenum = n;
                },
                // 搜索  重新赋值
                search(){
                    // 重置页码
                    this.pagenum = 1;
                    // 重新赋值
                    this.keyword = this.txt;
                },
                // 排序
                sort(){
                    this.isAsc = !this.isAsc;
                },
                //显示编辑对话框  编辑edit -接收数据
                edit(item){
                    this.isShowEdit = true;
                    // 接收数据 放入 编辑时所需读取的数据
                    this.position = Object.assign({},item);
                    // this.position = item;
                },
                // 更新数据
                update(){
                    // 查看一下
                    // console.log(pos);
                    this.datalist.find((item,index)=>{
                        if(this.position._id===item._id){
                            let tmp = JSON.parse(JSON.stringify(this.position));
                            this.datalist.splice(index,1,tmp);
                            this.position={};
                            return true;
                        }
                    })
                    // 关闭对话框
                    this.isShowEdit = false;
                },
                // 添加
                add() {
                    let _id = new Date().getTime().toString(16); //5e7c53850e2582a7daad7d24
                    let salary = Math.floor(Math.random() * 50000) + '';
                    this.datalist.push({
                        _id,
                        positionName: this.position.positionName,
                        salary
                    })
                    this.isShowAdd=false;
                }
            }
        })
    </script>
</body>
</html>